<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CROS设备管理控制</title>
    <!-- 引入 Layui 的核心 CSS -->
     <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        /* 自定义样式，使登录框更美观 */
        body {
            background-color: #f2f2f2;
        }
        .login-container {
            width: 350px;
            margin: 120px auto;
            padding: 40px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }
        .login-title {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
        }
        .login-form .layui-form-item {
            position: relative;
        }
        .login-form .layui-icon {
            position: absolute;
            left: 10px;
            top: 10px;
            color: #999;
        }
        .login-form .layui-input {
            padding-left: 35px;
        }
        .login-btn {
            width: 100%;
        }
    </style>
</head>
<body>

    <div class="login-container">
        <h2 class="login-title">设备登录系统</h2>
        <!-- 登录表单 -->
        <form class="layui-form login-form" action="/cgi-bin/ff.cgi" method="POST">
            <!-- 用户名 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-username"></i>
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名 admin" autocomplete="off" class="layui-input">
            </div>
            <!-- 密码 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码 123456" autocomplete="off" class="layui-input">
            </div>
            <!-- 登录按钮 -->
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-normal layui-btn-fluid login-btn" lay-submit lay-filter="loginForm">登 录</button>
            </div>
        </form>
    </div>

    <!-- 引入 Layui 的核心 JS -->
    <script src="layui/layui.js"></script>
    <script>
       layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;

            form.on('submit(loginForm)', function(data){
                var formData = data.field;

                // 发送 AJAX 请求到 CGI
                fetch('/cgi-bin/ff.cgi', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'username=' + encodeURIComponent(formData.username) + '&password=' + encodeURIComponent(formData.password)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.code === 0) {
                        layer.msg('登录成功！', {icon: 1});
                        // 可以跳转到其他页面
                        // window.location.href = '/dashboard.html';
                    } else {
                        layer.msg(result.msg, {icon: 2});
                    }
                })
                .catch(error => {
                    layer.msg('服务器请求失败！', {icon: 2});
                });

                return false; // 阻止表单默认提交
            });
        });
    </script>
</body>
</html>